約 4,691,427 件
https://w.atwiki.jp/k4241271wiki/pages/14.html
基本 まず、Javaとjavascriptは別物。 ページを表示する script 要素は基本的に /body の直前。 body 配下で直接呼び出すための関数を定義する場合は head 要素の配下に記述 jacascriptでは大文字小文字が厳密に区別される 配列の添字はrubyと同じく0から始まる。 rubyと同じオブジェクト指向 用語 オブジェクト データを保持するもの インスタンス インスタンス化によってできあがったオブジェクトの複製 init UNIXの起動時に/etc/inittabファイル(設定ファイル)を読み込み、そこに記述されているコマンドやデーモンを実行するプロセスのこと。 構文 コメントアウト / /コメント script 要素 script type="text/javascript" javascriptのコード /script アンカータグ(href属性)に埋め込む(p39) a href="Javascript スクリプトコード" リンクテキスト /a 変数 変数の宣言(varとletjujn) var 変数名 [= 初期値] let 変数名 [= 初期値] varとletの違い letは同盟の変数を許可しない。 ブロックスコープを認識する →letは最近導入された変数名。letの方が細かく指定でき良さげだけど互換性に不安が残る。 定数 const 定数名 = 値 制御構文(ifとswitch) 2つから片方を選択する→if 複数から1つを選択するswitch (caseとか使うやつ) オブジェクトやインスタンス インスタンス化(new 演算子) var 変数名 = new オブジェクト名([引数,...]) プロパティ/メソッド呼び出し 変数名.プロパティ名[= 設定値]; 変数名.メソッド名([引数[,...]]);3 記述 EventTarget.addEventListener https //developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener
https://w.atwiki.jp/nestresident/pages/24.html
□Javascript-WEB上のページを自由に編集 ページを自由に編集できるJavascript スクリーンショットを撮るときに広告を消したりとかできます javascript document.body.contentEditable= true ; document.designMode= on ; void 0
https://w.atwiki.jp/dotcom/pages/99.html
こんなかんじ。参考サイトさんのURLがみつかりません。。どうしよう。 見つかり次第追記しますです。 script language="JavaScript" !-- menuItem = [["りんご","みかん","いちご",],["きゃべつ","はくさい","たまねぎ",],["あじ","さんま","ほっけ",],]; function setMenuItem(n,codeb) { len = document.forms["mainform"].elements[codeb].options.length; for (i=len-1; i =0; i--) { document.forms["mainform"].elements[codeb].options[i] = null; } for (i=0; i menuItem[n].length; i++) { document.forms["mainform"].elements[codeb].options[i] = new Option(menuItem[n][i],menuItem[n][i]); } } // -- /script form name="mainform" onsubmit = "return check()" select name="CodeA" onChange="setMenuItem(this.selectedIndex, CodeB )" option selected="" くだもの /option option selected="" やさい /option option selected="" さかな /option /select select name="CodeB" style="width 150px;" option /option /select /form
https://w.atwiki.jp/naobe/pages/73.html
言語に戻る はじめに Netscape社が制定。IEのJScriptとの互換性に問題があり、ECMAの標準規格ECMA-262(JavaScript1.1がベース)が制定され、この規格がJavaScriptの標準規格となった。 2009年時点では、JavaScript1.5~1.7。JavaScript2.0が現在検証中。 文法 コメント //コメント /* コメント */ 演算子 typeof演算子 オペランドに変数を用い、変数の型を表す文字を返す。"string","number","boolean","object","function","undefined"のどれかを返す。 等値演算子(==)と同値演算子(===) ==は型変換を行って、同じ値か確認する。===は型も含めて同じであるか判定する。 【例】 var a = "1"; var b = 1; if( a == b) { document.write("等値 br "); } else { document.write("等値でない br "); } document.write(" br "); if( a === b) { document.write("同値 br "); } else { document.write("同値でない br "); } document.write(" br "); 正規表現 JavaScript1.2から正規表現に対応。 修飾子 g マッチしたものを全て出力。 i 大文字と小文字を区別しない。 例 script !-- var a = "That pen s price is 100$. this pen s price is 200$"; var regx = /[0-9]+/g; var b = a.match(regx); document.write("検索対象文字列" + a + " br "); document.write("正規表現" + regx + " br "); document.write("マッチした文字:" + b + " br "); //-- /script 条件分岐 if 繰り返し処理 while() {} while(条件) { ステートメント } 条件が真の間、ステートメントを実行する。 do { ステートメント } while(条件); 条件が真の間、ステートメントを実行する。最初のステートメントは無条件で実行する。 for in for(プロパティ in オブジェクト) { } オブジェクトのプロパティ名全てに対して処理する。 【例1】 for(var property in navigator) { document.write(navigator[property]); document.write(" br "); } 関数 機能をモジュール化して、共通化する。資源の節約、バグの低減に有効。 書式 function 関数名(引数) { 処理 [return 式] } 関数リテラル 関数を変数(オブジェクト)に代入して使う。 【例】 var func = function(x,y) { return x * y; } func(10, 20); 変数 関数の外部で定義した変数は関数内で使える(グローバル。C言語と同じ)。 【例】 var aaa = "aaa"; function func(x,y) { return aaa; } window.self 自身のwindowオブジェクト window.opener マルチウィンドウの親 windo.parent フレーム分割の1つ親 with文 共通するオブジェクトの記述を省略するために使う。 書式 with(オブジェクト) { } 例 with(document) { write("aaa"); write("bbb"); } 配列 引数は文字列に変換され連想配列として作成される。 初期化 a = []; 代入 a[0] = 1; a[1] = 2; 削除 delete a[0] a[0]がundefinedになり、a[1]は残る。 先頭の抽出 b = a.shift() aの先頭は削除。 最後の抽出 b = a.pop() aの最後は削除。 指定位置の抽出 b = a.slice(start, [end]) endがなければ最後まで。aは変化しない。bは配列になる。 オブジェクト コンストラクタ関数を作成し、newして使う。メソッドは、クラス固有なのでprototypeプロパティに設定する。 【例】 //長方形 function Rectangle(x, y){ this.x = x; this.y = y; } Rectangle.prototype.area = function(){ return this.x * this.y; } var rect = new Rectangle(10, 20); document.write("x:" + rect.x + " br "); document.write("y:" + rect.y + " br "); document.write("面積:" + rect.area() + " br "); クラスプロパティ コンストラクタ関数のプロパティ。定数を表すために使う。名前空間としてクラスを使い名前衝突を防ぐ。 【例】 Number.MAX_VALUE クラスメソッド コンストラクタ関数の関数。汎用的な関数を表すために使う。名前空間としてクラスを使い名前衝突を防ぐ。 【例】 Date.parse() クラスの継承 プロトタイププロパティを利用して、継承したクラスを作成する。 【例】 // クラスの継承 function PointedRectangle(w, h, x, y) { Rectangle.call(this, w, h); this.x = x; this.y = y; } // メソッドを継承させる PointedRectangle.prototype = new Rectangle(); // プロトタイププロパティを削除 delete PointedRectangle.prototype.width; delete PointedRectangle.prototype.height; // コンストラクタを元に戻す PointedRectangle.prototype.constructor = PointedRectangle; var prect = new PointedRectangle(20, 40, 200, 400); 連想配列 プロパティのアクセス方法には以下の2とおりの方法がある。 obj.property = 値; obj["property"] = 値; 2番目の方法を使うとプロパティ名を変数として与えることができるので、連想配列として使える。 WEBアプリケーション Java Scrriptの記述 script タグの中に本体を記述。 script は、何回でも、どこにでも記述可能。ただし呼び出しの前に本体を記述しなければならない。 header タグの中に記述する場合が多い。 JavaScriptに対応していないブラウザに対処するために以下の書式を使う。 script !-- ・・・ //-- /script イベントハンドラ onclick リンク、ボタンの属性。JavaScriptの関数を指定する。falseを返すと、デフォルト処理をキャンセルする(フォームのときは、送信しない。)。 onload body タグに指定する。ドキュメントや画像などの外部コンテンツが完全に読み込まれたときにこのイベントハンドラが呼び出される。 右クリック禁止 body oncontextmenu="return false"" 外部JavaScriptファイル参照 script type="text/javasctipt" src="XXX.js" /script 組み込みメソッド setTimeout(実行する関数, 遅れ時間(ms)) 【例】 ar timer = false; function foo(){ if(timer == false){ setTimeout(function() { timer = true; foo(); timer=false; }, 2000); return; } alert("hello!"); } foo(); 【例12】 var isTrx = 0; var delayTime = 5000; //2重押下抑止 function check() { if (isTrx == 1) { return false; } isTrx = 1; setTimeout( isTrx = 0; , delayTime); return true; } テクニック [Enter]キーでフォームの内容が送信されるのを防ぐ記述 form action="***" method="***" onsubmit="return false;" オブジェクトモデル window +--document | +-- anchors[] | +-- applets[] | +-- Area | +-- forms[] | | +-- elements[] 要素は、Button,CheckBox,・・・ | | +-- Button | | +-- CheckBox | | +-- FileUpload | | +-- Password | | +-- Hidden | | +-- Radio | | +-- Reset | | +-- Select | | | +-- options[] | | | | | +-- Submit | | +-- Text | | +-- Textarea | +-- images[] | +-- links[] +-- history +-- location +-- frames[] +-- navigator +-- screen windowは、ブラウザウィンドウまたはフレームを表す。 フォーム フォーム全体:forms フォームの各要素:elements 添え字によるアクセス document.forms[1].elements[2] ・・ 2番目のformの3番目の要素(button,password,radiobox,textareaなど ) 名前によるアクセス html form name="f1" /form form name="f2" /form /html 上記例では、document.f2 イベント イベント 発生タイミング イベントハンドラ 対象オブジェクト blur ユーザのフォーカスが離れたとき onBlur テキストフィールド focus フォーカスされたとき onFocus テキストフィールド click クリックしたとき onClick ボタン、ラジオボタン、チェックボックス、サブミットボタン、リンク、リセットボタン change 値が変更されたとき onChange テキストフィールド load WebページがWebブラウザにロードされたとき onLoad bodyタグ unload 別のページに移動したとき onUnLoad bodyタグ 【例 onLoad】 body onLoad="alert( ロードしました )" 【例 onUnLoad】 body onUnLoad="alert( 移動しました )" 動作しない!! 新たにウィンドウを開く window.open(URL, ターゲット, フィーチャ); URL ロードするサイトのURL ターゲット フィーチャ 何も設定しなければ、起動もとのウィンドウと同じ。一つでも設定すれば、設定した項目のみ有効。 項目 説明 height=X ウィンドウの高さ width=X ウィンドウの幅 left=X ウインドウの画面左からの位置 top=X ウインドウの画面トップからの位置 location URL入力用のバーを表示 menubar メニューバーを表示 resizable ウィンドウのサイズを変更可能にする status ウィンドウ下のステータスバーを表示 scrollbars スクロールバーを表示 セキュリティ JavaScriptでできないこと クライアントのファイルに対して読み書きができない。 ネットワーク機能自体をサポートしない(生のTCP/IPを使えない) 別ブラウザを開くのは、ボタンクリックなどのユーザ操作に対してのみ。(無制限なポップアップウィンドウ表示をなくすため) クローズできるのは、自分が開いたウィンドウのみ 小さなウィンドウ(100ピクセル以下)を開くことはできない。 スクリプトをロードしたサーバと異なるサーバからロードしたドキュメントを操作することはできない。(同一出身ポリシー) 作成例 html head meta http-equiv="Content-Type" content="text/html; charset=UTF-8" meta http-equiv="Content-Style-Type" content="text/css" meta http-equiv="Content-Script-Type" content="text/javascript" title JavaScriptテスト /title style type="text/css" !-- h1 {font-size 14pt}; h2 {font-size 12pt} -- /style /head body oncontextmenu="return false" onLoad="alert( ロードしました )" onunload="alert( ページを移動しました )" h1 単純な文字出力 /h1 script type="text/javascript" !-- document.write("Hello Java Script."); //-- /script h1 外部ファイル /h1 script type="text/javascript" src="aaa.js" /script h1 正規表現 /h1 h2 マッチした文字を返す /h2 script !-- var a = "That pen s price is 100$. this pen s price is 200$"; var regx = /[0-9]+/g; var b = a.match(regx); document.write("検索対象文字列" + a + " br "); document.write("正規表現" + regx + " br "); document.write("マッチした文字:" + b + " br "); //-- /script h1 繰り返し処理 /h1 h2 for in /h2 script type="text/javascript" !-- for(i in navigator) { document.write(navigator[i]); document.write(" br "); } //-- /script h1 関数の使用 /h1 script type="text/javascript" !-- function func1(a) { return a*2; } document.write("3*2=" + func1(3) + " br " ); //-- /script h1 with文 /h1 script type="text/javascript" !-- with(document) { write("aaa" + " br "); write("bbb" + " br "); } //-- /script h1 マウス右クリック無効化 /h1 script language="JavaScript" !-- function RightOff(e) { if (document.layers e.which == 3){ //NNの場合 alert("右クリックメニューは機能停止しました!"); return false; }else if (document.all event.button == 2) { //IEの場合 alert("右クリックメニューは機能停止しました!"); return false; } return true; } if(document.all){ //IEの場合 document.onmousedown = RightOff; } if(document.layers){ //NNの場合 window.onmousedown = RightOff; window.captureEvents(Event.MOUSEDOWN); } // -- /script firefoxでは無効。 h1 onLoad /h1 p ページを開いたときに起動。bodyタグに記述。 /p h1 onUnLoad /h1 p 別のページに移動したときに起動。bodyタグに記述。 /p a href="http //localhost/PukiWiki/index.php" ホームに移動 /a h1 onBlur/onFocus /h1 form input type="text" onblur="alert( onblur action. )" value="" input type="text" onfocus="alert( onfocus action. )" value="" /form h1 別ウィンドウを開く /h1 h1 タイマー /h1 script type="text/javascript" !-- var cnt = 0; var ret; function rewritePg() { var p = document.getElementById("p1"); if(p == null) { alert("p1 null."); } if( cnt % 2 == 0 ) { p.innerHTML = "bbb"; /** p.firstChild.data = "bbb" でも良い。 */ } else { p.innerHTML = "aaa"; } cnt++; ret = setTimeout("rewritePg()", 2000); } function stopRewrite() { clearTimeout(ret); } //-- /script p 2秒ごとにパラグラフの文字を変える。 /p p id="p1" aaa /p input type="button" value="開始" onClick="rewritePg()" / br input type="button" value="停止" onClick="stopRewrite()" / br / body /html
https://w.atwiki.jp/fujiyan/pages/45.html
参考サイト JavaScript - MDN 檜山正幸のキマイラ飼育記 - プログラマのためのJavaScript 時代はJavaScript Functionオブジェクトあれこれ JavaScriptでクラスもどき
https://w.atwiki.jp/verklart/pages/64.html
トップページ 情報と考察 JavaScript プラグイン機能を使用することで、ページ内にさまざまな機能のマクロを組み込むことが可能です。 ここではJavaScriptの組み込みを説明します。 以下の手順でJavaScriptを組み込みます。 1.編集画面のプラグインを押します。 imageプラグインエラー ご指定のファイルが見つかりません。ファイル名を確認して、再度指定してください。 (貼り付け1.jpg) 2.編集サポートを押します。 imageプラグインエラー ご指定のファイルが見つかりません。ファイル名を確認して、再度指定してください。 (貼り付け9.jpg) 3.javascriptを入力(javascript)を押します。 imageプラグインエラー ご指定のファイルが見つかりません。ファイル名を確認して、再度指定してください。 (貼り付け10.jpg) 4.スクリプトに、JavaScriptを入力します。 imageプラグインエラー ご指定のファイルが見つかりません。ファイル名を確認して、再度指定してください。 (貼り付け11.jpg) 5.入力ボタンを押します。 imageプラグインエラー ご指定のファイルが見つかりません。ファイル名を確認して、再度指定してください。 (貼り付け12.jpg)
https://w.atwiki.jp/shisaku0017/pages/79.html
JavaScriptに対応しているフリーウェア一覧 AjaxMGraph Canvas 3D Graph Canvas Pie Chart with Tooltips Chart Animation Script Chart Director Emprise JavaScript Charts Flot Flotr Graph Gear HTML-Graphs JS charts JavaScript Chart JavaScript Graph Plotting Tool LT Diagram Builder MooChart Pie Graph PlotKit ProtoChart Raphaël Timeplot TufteGraph fgCharting Plugin for jQuery jQuery Sparklines jqPlot 登録タグ グラフ出力形式 仕様 対応言語
https://w.atwiki.jp/shogi40database/pages/13.html
javascript 「javascript入力プラグイン(javascript, js)」は管理者しか利用出来ません。 しかし、ここにあるURLを「#include()」すれば使用可能です。 Kifu-for-JS javascript/Kifu-for-JS
https://w.atwiki.jp/zakuaku/pages/2600.html
javascript 「javascript入力プラグイン(javascript, js)」は管理者しか利用出来ません。 しかし、ここにあるURL又はページ名を「他のページを取り込む(include)」を利用すれば使用可能です。 ネタバレ防止 javascript/spoiler
https://w.atwiki.jp/ozuka/pages/18.html
html内でJavaScriptを使う場合、htmlのヘッダーに meta http-equiv="Content-Script-Type" content="text/javascript" と記述するのが作法 htmlのなかに埋め込む場合 script type="text/javascript" ここに記述 /script 外部のJavaScriptをhtmlに取り込む場合 script type="text/javascript" src=hoge.js" /script コメント 単一行 // 複数行 /* 〜 */ 文の終わりは";" ただし、";"がなくても1行として成立する場合は、勝手につくらしい。 変数の宣言 var 変数名; 数値、文字、オブジェクト等、全てvarでよい。 初期値を同時に定義するなら var 変数名 = 100; 変数の型は、その中身による。 数値に文字列を結合すると文字になる。 var a = 1; // aは数値の1 a = a + 1; // aは数値の2 a = a + 1 ; // aは文字列の 21 ちなみに、文字列は「+」で結合できる。 比較演算子 == 値が等しいかどうか評価 === 値と型が等しいかどうか評価 != 値が等しくないかどうか評価 !== 値と型が等しくないかどうか評価 他は普通( = = ) はない。 論理演算子 ! 否定 論理積 || 論理和 in演算子 オブジェクトまたは配列内に、指定したプロパティが存在するかどうか typeof演算子 var a = 0; typeof(a); //この場合、この結果はnumber 条件分岐 if (A == B) { 〜 } else if (A == C) { 〜 } else { 〜 } ちなみに、 x = a b ? a b ; は if ( a b ){ x = a; } else { x = b; } と同じ 繰り返し for ( var i = 0 ; i 100 ; i += 3){ document.write(i); } for (;;){ } で無限ループ var youbi = [ 月 , 火 , 水 , 木 , 金 , 土 , 日 ]; for (var wk in youbi){ document.write(youbi[wk] + " br "); } で"月"〜"日"まで出力。 ただし、JavaScriptのこの文は取り出す順番がよくわからない。 ループ前に判定(場合によってはwhile内を通らない) while (i 10){ 〜 i++; } ループ後に判定(まず、while内を1度実行してからwhile判定 do { 〜 i++; }while (i 10); 多分岐 switch (a) { case 1 〜 break; case 2 〜 break; default 〜 } breakがないと、処理が次のラベルにも入ってしまう。